<template>
  <div class="c-w100">
    <div class="c-flex-row liveList c-pt24" :key="index" v-for="(item,index) in itemList" @click="clickClassId(item.classId)" v-if="mb==3 || mb==5 || mb==6">
      <div class="c-pb24 c-mr20">
        <div class="c-ww210 c-maxh210 c-boxSizing-c c-text-hidden c-p c-br10">
          <img class="c-w100 imgCloseBig c-br10" :src="$addXossFilter(item.cover, require('../../assets/defult270.png'))" />
          <vip-status :item="item"></vip-status>
          <div v-if="item.limitNum-item.saleNum<=0" class="c-pa c-p-b0 c-p-l0 c-pz1 c-flex-row c-translucent-balck60 c-w100 c-p-t0">
            <img src="../../assets/i/wap/course/buynone.png" alt="" class="c-ww70 c-hh70 c-pa c-p-tp50 c-p-r0 c-p-l0 c-pz1 c-center c-mt-36" />
          </div>
        </div>
      </div>
      <div class="c-w0 c-flex-grow1 c-flex-column c-justify-sb c-p c-pb24" :class="index == itemList.length-1 ? '' : 'c-bd-b1'">
        <div class="c-fs24 c-text-ellipsis2 c-lh36 ">{{item.name}}</div>
        <div class="c-flex-row c-fs20 c-justify-sb c-fc-45B930" v-if="getTimeByDate(item.applyEndAt) && mb !=7 && itemType !=1">报名已截止</div>
        <div class="c-pa c-p-t-10 c-p-r0 iconfont c-fs80 c-fc-gray" v-if="getTimeByDate(item.applyEndAt) && mb==7 && itemType==1">&#xe68c;</div>
        <div class="c-flex-row c-justify-sb c-flex-center">
          <div class="c-flex-grow1 c-w0">
            <div class="c-flex-row theme-fc" :class="[1, 3, 4].includes(item.payType) ? 'c-fs22' : 'c-fs24'"><span v-if="item.payType == 2">{{'￥' | iosPriceFilter}}</span>{{item.payType | priceValueFilter(item.price, 115)}}</div>
          </div>
          <div class="c-fc-gray" :class="mb==6 || mb==3?'c-fs18':'c-fs20'">共{{item.detailNum}}节<span v-if="item.isHideLimit != 1"> | 剩{{item.limitNum-item.saleNum}}名额</span></div>
        </div>
      </div>
    </div>
    <div class="c-w100" v-if="mb==4">
      <div class="c-flex-row c-flexw-wrap c-justify-sb c-pt24">
        <div class="c-pb12 c-ww288" :key="index" v-for="(item,index) in itemList" @click="clickClassId(item.classId)">
          <div class="c-text-hidden c-p" :class="[isSetPageBackground ? '' : 'c-br10', mb==4 ? 'c-ww288 c-maxh284' : 'c-ww284 c-maxh284']">
            <img :src="$addXossFilter(item.cover, require('../../assets/defult270.png'))" class="c-w100 imgCloseBig">
            <vip-status :item="item"></vip-status>
            <div v-if="item.limitNum-item.saleNum<=0" class="c-pa c-p-b0 c-p-l0 c-pz1 c-flex-row c-translucent-balck60 c-w100 c-p-t0">
              <img src="../../assets/i/wap/course/buynone.png" alt="" class="c-ww110  c-hh110 c-pa c-p-tp50 c-p-r0 c-p-l0 c-pz1 c-center c-mt-56" />
            </div>
            <div class="c-pa c-p-b0 c-p-l0 c-pz1 c-flex-row c-bg-black c-translucent-balck60 c-w100">
              <div class="c-fc-white c-fs16 c-w100 c-hh34 c-lh34 c-textAlign-c c-fc-white" v-if="getTimeByDate(item.applyEndAt)">报名已截止</div>
            </div>
          </div>
          <div>
            <div class="c-fs24 c-mt16 c-lh36 c-text-ellipsis2 c-fc-xblack">{{item.name}}</div>
            <div class="c-fs20 c-fc-gray c-mt10">共{{item.detailNum}}节<span v-if="item.isHideLimit != 1"> | 剩{{item.limitNum-item.saleNum}}名额</span></div>
            <div class="c-flex-row c-aligni-end c-justify-sb c-mt10">
              <div class="theme-fc" :class="[[1, 3, 4].includes(item.payType) ? 'c-fs22' : 'c-fs24']"><span v-if="item.payType == 2">{{'￥' | iosPriceFilter}}</span>{{item.payType | priceValueFilter(item.price, 115)}}</div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { utilJs } from "@/utils/common.js"
import defultImg from '../../assets/defult270.png'
import vipStatus from '@/components/templates/common/vipStatus.vue'
export default {
  name: "ColumnItem",
  components: {
    vipStatus
  },
  props: {
    mb: {
      type: Number,
      default: 1
    },
    itemType: {
      type: Number,
      default: 1, //1一行一列，2一行两列，3一行三列
    },
    itemList: {
      type: Array,
      default: () => []
    },
  },
  data() {
    return {
      noImg: defultImg,
      theme: localStorage.getItem("colorName") ? localStorage.getItem("colorName") : 'mb5_default',
      isSetPageBackground: sessionStorage.getItem("isSetPageBackground") || 0,
      pageTextColor: sessionStorage.getItem('pageTextColor') || '',
    };
  },

  methods: {
    clickMore() {
      this.$emit('clickMore');
    },
    iosAppRouteChange(toPath) {
      if (utilJs.isIOSApp()) {
        window.webkit.messageHandlers.iosWechatRoute.postMessage(toPath);
      } else if (utilJs.isAndoridNewApp()) {
        let data = {
          path: toPath
        }
        window.androidWechatRoute.doAction(JSON.stringify(data))
      } else {
        this.$routerGo(this, "push", { path: toPath });
      }
    },
    clickClassId(classId) {
      let toPath = `/homePage/privateClass/classDetail?classId=${classId}`;
      this.iosAppRouteChange(toPath);
    },
    setDefultImg(e) {
      this.item.avatar = defultImg;
    },
    getTimeByDate(time) {
      var myDate = new Date()
      if (utilJs.getTimeByDate(time) == 0) {
        return false
      }
      if (utilJs.getTimeByDate(time) >= myDate.getTime()) {
        return false
      } else {
        return true
      }
    }
  }
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.c-mt30 {
  margin-top: 0.75rem;
}
.c-fc-45B930 {
  color: #45b930;
}
.c-pt14 {
  padding-top: 0.35rem;
}
.c-mt-36 {
  margin-top: -0.9rem;
}
.c-mt-45 {
  margin-top: -1.125rem;
}
.c-mt-60 {
  margin-top: -1.5rem;
}
.c-mt-56 {
  margin-top: -1.4rem;
}
.liveList:last-child {
  border-bottom: none;
}
.c-translucent-balck60 {
  background-color: rgba(0, 0, 0, 0.6);
}
.c-p-t10 {
  top: 0.25rem;
}
.c-p-t-10 {
  top: -0.15rem;
}
.c-p-r-8 {
  right: -0.2rem;
}
</style>
